<template>
  <div class="side-bar">
    <h3 class="logo">场景验证</h3>
    <el-scrollbar style="height: calc(100% - 60px)">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        text-color="#303133"
        router
        @select="handleSelect"
      >
        <template v-for="(item, index) in menuItems" :key="index">
          <el-sub-menu v-if="item.type === 'menu'" :index="item.link" popper-class="subMenu">
            <template #title>
              <!-- <el-icon><component :is="item.icon"></component></el-icon> -->
              <span>{{ item.name }}</span>
            </template>
            <template v-if="item.children">
              <el-menu-item v-for="res in item.children" :key="res.link" :index="res.link">
                <template #title>
                  <span>{{ res.name }}</span>
                </template>
              </el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item class="active-item" v-else :index="item.link">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import type { menuType } from './type'
const activeIndex = ref('/homePage') // 默认选中的菜单项的索引
const route = useRoute()
const menuItems: menuType[] = [
  {
    name: '小批量个性化应用',
    link: '/scenario',
    type: 'item',
    icon: 'Tickets'
  }
]
const findPath = (value: menuType[]): menuType | undefined => {
  for (const res of value) {
    const findData: menuType | undefined = res.children?.length ? findPath(res.children) : res
    if (findData?.link === route.path) {
      return findData
    }
  }
}
watchEffect(() => {
  activeIndex.value = findPath(menuItems)?.link || '/homePage'
})
//select 事件
const handleSelect = (index: string) => {
  activeIndex.value = index
}
</script>
<style scoped lang="less">
:deep(.el-scrollbar__view) {
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 160px;
  min-height: 400px;
}

.el-menu-vertical-demo {
  height: 100%;
  border: none;
}

.side-bar {
  height: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 5px 0px 5px #000000;
}

.logo {
  text-align: center;
  line-height: 60px;
  height: 60px;
  color: #303133;
}

:deep(.el-sub-menu .el-menu) {
  background-color: #f2f3f5;
  border-radius: 8px;
}

:deep(.el-menu .el-sub-menu.is-active .el-sub-menu__title) {
  background-color: #0c78e1 !important;
  border-radius: 8px;
  color: #fff;
  margin-bottom: 10px;
}
:deep(.el-menu-vertical-demo > .el-menu-item.is-active) {
  background-color: #0c78e1 !important;
  border-radius: 8px;
  color: #fff;
  margin-bottom: 10px;
}
:deep(.el-menu-item) {
  word-break: break-all;
  padding-left: 20px !important;
}
.active-item.is-active {
  background-color: #0c78e1;
  border-radius: 8px;
  color: #fff;
  margin-bottom: 10px;
}
</style>
